<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 循环结构  => 简单的来说: 重复的做一件事
    // 在满足特定条件的情况下,重复的执行某个代码段 直到条件不满足为止
    // while    do...while   for   

    // while(表达式){  //  表达式 => 循环条件
    //     循环体; // 在满足特定条件的情况下,重复的执行某个代码段
    // }

    // 循环的三要素  (适用于大部分循环)
    // 1. 初始值          i = 1;         i =  10    
    // 2. 循环条件        i <= 10;       i >= 1
    // 3. 自增/自减       i ++;          i--  

    // 变量i的作用
    // 1. 作为初始值(开始位置)  
    // 2. 记录循环的位置 (循环到那个位置了)

    var i = 1; // 循环初始值  => 记录循环开始的位置
    while (i <= 5) {  // 循环条件  在满足特定条件的情况下,才重复的执行某个代码段
      document.write("*");  //重复做的某件事(可以使一条或多条js语句)
      i++; // 自增(自减)
    }
    console.log(i);

    // 首先求解表达式(判断条件是否成立),如果成立,则执行{}中对应的循环语句,{}中语句执行完毕,则会再次求解表达式,依次类推,直到条件不满足为止

    // 初始值 i=1 
    // i = 1, i <= 5 => true   执行循环语句  document.write("*"); i++ =>  i=2 
    // i = 2, i <= 5 => true   执行循环语句  document.write("*"); i++ =>  i=3 
    // i = 3, i <= 5 => true   执行循环语句  document.write("*"); i++ =>  i=4 
    // i = 4, i <= 5 => true   执行循环语句  document.write("*"); i++ =>  i=5 
    // i = 5, i <= 5 => true   执行循环语句  document.write("*"); i++ =>  i=6 
    // i = 6, i <= 5 => false  跳出循环,执行循环之后的语句

    // 断点分析





  </script>
</body>

</html>